<template>
  <div>
    <div class="floor">
      <div class="floor-title">{{floorTitle}}</div>
      <div class="floor-abnormal">
        <div class="floor-one">
          <img v-lazy="floorData0.image" width="100%" alt="">
        </div>
        <div>
          <div class="floor-two">
            <img v-lazy="floorData1.image" width="100%" alt="">
          </div>
          <div>
            <img v-lazy="floorData2.image" width="100%" alt="">
          </div>   
        </div>
      </div>
      <div class="floor-normal">
        <div v-for="(item,index) in floorData.slice(3)" :key="index">
          <img v-lazy="item.image" width="100%" alt="">
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['floorData','floorTitle'],
  data() {
    return {
      floorData0:{},
      floorData1:{},
      floorData2:{}
    }
  },
  created() {

  },
  watch:{
    floorData:function () {
      this.floorData0 = this.floorData[0]
      this.floorData1 = this.floorData[1]
      this.floorData2 = this.floorData[2]
    }
  },
  methods: {

  },
  components: {

  }
}
</script>

<style lang="scss" scoped>
 .floor-title{
    border-left: 5px solid ;
    background-color: #fbfbfb;
    font-size: 16px;
    padding:.2rem;
    margin-top:.5rem;
    color:#e5017e;
 }
 .floor-abnormal{
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    div{
      width: 10rem;
      box-sizing: border-box;
      -webkit-box-sizing:border-box;
    }
    .floor-one{
      border-right: 1px solid #eee;
    }
    .floor-two{
      border-bottom: 1px solid #eee;
    }
  }
  .floor-normal{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
    div{
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 50%;
      border-bottom: 1px solid #eee;
      &:nth-child(odd){
        border-right: 1px solid #eee;
      } 
    }
  }
</style>
